Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 实际图片路径
    src: {
      type: String,
      value: ''
    },
    // 占位图路径
    placeholderSrc: {
      type: String,
      value: '/images/placeholders/default_placeholder.svg'
    },
    // 错误占位图路径
    errorSrc: {
      type: String,
      value: '/images/placeholders/error_placeholder.svg'
    },
    // 图片裁剪模式
    mode: {
      type: String,
      value: 'aspectFill'
    },
    // 宽度
    width: {
      type: String,
      value: '100%'
    },
    // 高度
    height: {
      type: String,
      value: '300rpx'
    },
    // 自定义类名
    customClass: {
      type: String,
      value: ''
    },
    // 自定义样式
    customStyle: {
      type: String,
      value: ''
    },
    // 是否使用微信小程序原生懒加载
    useLazyLoad: {
      type: Boolean,
      value: true
    },
    // 是否使用WebP格式
    useWebp: {
      type: Boolean,
      value: true
    },
    // 是否显示加载动画
    showLoading: {
      type: Boolean,
      value: true
    },
    // 是否使用淡入效果
    fadeIn: {
      type: Boolean,
      value: true
    },
    // 是否显示重试按钮
    showRetry: {
      type: Boolean,
      value: true
    },
    // 是否显示长按菜单
    showMenuByLongpress: {
      type: Boolean,
      value: false
    },
    // 自动重试次数
    retryCount: {
      type: Number,
      value: 1
    },
    // 重试延迟(毫秒)
    retryDelay: {
      type: Number,
      value: 1000
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    loaded: false,
    error: false,
    currentRetryCount: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 图片加载成功
    onImageLoad() {
      // 延迟一点显示实际图片，让占位图平滑过渡
      setTimeout(() => {
        this.setData({
          loaded: true
        });
        // 触发加载完成事件
        this.triggerEvent('load');
      }, 100);
    },
    
    // 图片加载失败
    onImageError(e) {
      console.error('图片加载失败:', this.data.src, e);
      
      // 尝试自动重试
      if (this.data.currentRetryCount < this.data.retryCount) {
        this.setData({
          currentRetryCount: this.data.currentRetryCount + 1
        });
        
        setTimeout(() => {
          // 通过重新设置src触发重新加载
          this.setData({
            src: this.data.src + '?retry=' + new Date().getTime()
          });
        }, this.data.retryDelay);
        
        return;
      }
      
      this.setData({
        error: true,
        loaded: false
      });
      
      // 触发错误事件
      this.triggerEvent('error', e);
    },
    
    // 手动重试加载
    retryLoad() {
      this.setData({
        error: false,
        loaded: false,
        currentRetryCount: 0,
        // 添加时间戳避免缓存
        src: this.data.src + '?reload=' + new Date().getTime()
      });
    }
  }
})